<template>
  <div class="table-container">
    <h4>事件列表</h4>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="serialNumber" label="序号" width="180" />
      <el-table-column prop="FID" label="FID" width="180" />
      <el-table-column prop="number" label="事件编号" />
      <el-table-column prop="level" label="事件等级" />
      <el-table-column prop="time" label="发生时间" />
      <el-table-column prop="address" label="发生地点" />
      <el-table-column prop="licensePlateNumber" label="车牌号" />
      <el-table-column prop="pilot" label="驾驶员" />
      <el-table-column prop="ProcessingState" label="处理状态" />
    </el-table>
    <el-pagination
      small
      layout="prev, pager, next"
      background
      page-size
      :5
      :total="50"
    />
  </div>
</template>

<script setup>
import { ref } from "vue"
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]
</script>

<style lang="scss" scoped>
.table-container{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 500px;
}
</style>
